<template>

	<div class="page-canvas">
		<image :src="path" lazy-load :lazy-load-margin="0" fade-show @load="loadImage" mode="widthFix"
			class="canvas-image"></image>

		<div class="painter-box">
			<l-painter ref="painter" isCanvasToTempFilePath @success="path = $event" hidden
				css="width: 100%;background:#fff;border-radius:30rpx;">

				<l-painter-view
					css="margin-left: 20rpx;margin-right: 20rpx;margin-top: 20rpx;width:100%;box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx;">
					<l-painter-image :src="imageProp"
						css="object-fit: contain;object-position: 50% 50%;width: 100%;border-radius: 12rpx;margin-bottom:30rpx;box-shadow: 0px 2px 15rpx rgba(0, 0, 0, 0.3);" />
					<l-painter-image css="position: absolute;top: 20rpx;right: 20rpx;width: 180rpx;height: 180rpx;" src="/static/logo.png" />
					<l-painter-view
						css="display:flex;flex-direction: row;justify-content: space-between;width:100%;padding-bottom:20rpx">
						
						<l-painter-view
							css="flex:1;display:flex;flex-direction: row;width: 70%;margin-left:20rpx;">
							<l-painter-text
								css="line-clamp: 3; color: #333333; line-height: 1.5em; font-size: 24rpx; width: 300rpx; padding-right:32rpx; box-sizing: border-box"
								:text="textProp"></l-painter-text>
						</l-painter-view>
						
						<!-- <l-painter-qrcode css="width: 128rpx; height: 128rpx;margin-right:20rpx;"
							:text="qrcodeProp"></l-painter-qrcode> -->

						<l-painter-view
							css="display:flex;flex-direction: column; align-items:center;justify-content:center;width: 30%;padding-left:60rpx;">
							<l-painter-image :src="qrcodeProp"
								css="object-fit: contain; object-position: 50% 50%;border-radius: 12rpx;width: 100rpx; height: 100rpx;" />
							<l-painter-text
								css="line-clamp: 1; color: #333333; line-height: 1.5em; font-size: 26rpx;" text="拍同款"></l-painter-text>
						</l-painter-view>
						
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</div>
	</div>
</template>

<script>

	export default {
		name: "placardCanvas",
		props: {
			width: {
				type: Number,
				default: 470
			},
			height: {
				type: Number,
				default: 690
			},
			imageProp: {
				type: String,
				default: ''
			},
			qrcodeProp: {
				type: String,
				default: ''
			},
			textProp: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				path: ''
			};
		},
		mounted() {
			uni.showLoading({
				title: '海报加载中..',
				mask: true,
			})
		},
		methods: {
			loadImage(e) {
				uni.hideLoading()
				this.$emit("hasLoadedImage",true)
			},
			saveImage() {
				uni.showLoading({
					title: "下载中",
					mask: true
				});
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						uni.hideLoading()
						// 非H5 保存到相册
						// H5 提示用户长按图另存
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '成功保存到相册',
									duration: 2000,
									complete: () => {}
								});
							}
						});
					},
				});
			}
		}
	}
</script>

<style scoped>
	.page-canvas {
		width: 100vw;
		padding: 30rpx;
		display: flex;
		justify-content: center;
	}

	.canvas-image {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}

	.painter-box {
		background-color: #fff;
	}
</style>